<template>
  <view class="goods_detail" v-if="goods_info.goods_name">
    <!-- 商品轮播图 -->
    <swiper
      :indicator-dots="true"
      indicator-color="rgba(0,0,0,.3)"
      autoplay="true"
      interval="3000"
      duration="1000"
    >
      <swiper-item v-for="(item, id) in goods_info.pics" :key="id">
        <image :src="item.pics_big" @click="previewImg(id)"> </image>
      </swiper-item>
    </swiper>

    <!-- 商品标题信息 -->
    <view class="goods_info">
      <view class="goods_price"> ￥{{ goods_info.goods_price }} </view>

      <view class="goods_name_wrapper">
        <view class="goods_name">
          {{ goods_info.goods_name }}
        </view>
        <view class="goods_collect-btn">
          <uni-icons type="star" size="16"></uni-icons>
          <text> 收藏 </text>
        </view>
      </view>

      <view class="goods_yf">快递：免运费</view>
    </view>

    <!-- 商品介绍信息 -->
    <rich-text :nodes="goods_info.goods_introduce"> </rich-text>

    <!-- 商品导航组件 -->
    <view class="goods_btn">
      <uni-goods-nav
        :fill="true"
        :options="options"
        :buttonGroup="buttonGroup"
        @click="onClick"
        @buttonClick="buttonClick"
      />
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  name: "goods_detail",
  components: {},
  props: {},
  data() {
    return {
      goods_info: [], // 商品详情
      goods_pics: [], //图片链接列表
      options: [
        {
          icon: "shop",
          text: "商铺",
        },
        {
          icon: "cart",
          text: "购物车",
          info: 0,
        },
      ],
      buttonGroup: [
        {
          text: "加入购物车",
          backgroundColor: "#ff0000",
          color: "#fff",
        },
        {
          text: "立即购买",
          backgroundColor: "#ffa200",
          color: "#fff",
        },
      ],
    };
  },
  computed: {
    ...mapState("m_cart", ["cart"]),
    ...mapGetters("m_cart", ["total"]),
  },
  methods: {
    ...mapMutations("m_cart", ["addToCart"]),
    // 发送请求获取商品详情信息
    async getGoodsInfo(goods_id) {
      const res = await uni.$http.get("/api/public/v1/goods/detail", {
        goods_id,
      });
      if (res.statusCode !== 200) return uni.$showMessage("商品详情获取失败~");

      res.data.message.goods_introduce =
        res.data.message.goods_introduce.replace(
          /<img /g,
          '<img style="display: block;" '
        );

      this.goods_info = res.data.message;
      this.goods_info.pics.forEach((element) => {
        this.goods_pics.push(element.pics_big);
      });
    },
    // 轮播图预览
    previewImg(id) {
      uni.previewImage({
        current: id,
        urls: this.goods_pics,
        indicator: true,
      });
    },
    // uni-goods_btn 点击事件
    onClick(e) {
      if (e.content.text === "购物车") {
        uni.switchTab({ url: "/pages/cart/index" });
      }
    },
    buttonClick(e) {
      if (e.content.text === "加入购物车") {
        const goods = {
          goods_id: this.goods_info.goods_id,
          goods_name: this.goods_info.goods_name,
          goods_price: this.goods_info.goods_price,
          goods_small_logo: this.goods_info.goods_small_logo,
          goods_count: 1,
          goods_state: true,
        };

        this.addToCart(goods);
      }
    },
  },
  watch: {
    total: {
      handler(val) {
        const shop_cart = this.options.find((x) => x.text === "购物车");

        if (shop_cart) shop_cart.info = val;
      },
      immediate: true,
    },
  },

  // 页面周期函数--监听页面加载
  onLoad(options) {
    const goods_id = options.goods_id;
    this.getGoodsInfo(goods_id);
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style scoped lang="scss">
.goods_detail {
  height: 60%;
  padding-bottom: 50px;
  swiper {
    width: 750rpx;
    height: 320px;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .goods_info {
    padding: 5px;
    display: flex;
    flex-direction: column;

    .goods_price {
      color: #c00000;
    }

    .goods_name_wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .goods_name {
        width: 83%;
        font-size: 12px;
        padding-right: 5px;
        box-sizing: border-box;
        border-right: 1px solid #dfdfdf;
      }

      .goods_collect-btn {
        width: 15%;
        display: flex;
        flex-direction: column;
        text-align: center;

        text {
          font-size: 12px;
          color: #2b2b2b;
        }
      }
    }

    .goods_yf {
      color: #afafaf;
      font-size: 12px;
    }
  }

  .goods_btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>